<!DOCTYPE html>
<html>

<head>
  <title>Text-Shadow</title>
  <link rel="match" href="reference/text-shadow-ref.html" />
  <style>
    * {
        margin: 0;
        font: 20px SerenitySans;
    }

    .box {
      border: 1px solid black;
      height: 150px;
      width: 150px;
      margin: 10px;
    }
  </style>
</head>

<body>
<h2>Simple</h2>
<div class="box" style="text-shadow: 25px 50px blue">
  <p>text-shadow: 25px 50px blue</p>
</div>

<h2>Blur</h2>
<div class="box" style="text-shadow: magenta 0 0 3px">
  <p>text-shadow: magenta 0 0 3px</p>
</div>

<h2>Multiple</h2>
<div class="box" style="text-shadow: 4px 4px blue, 8px 8px green, 12px 12px yellow">
  <p>text-shadow: 4px 4px blue, 8px 8px green, 12px 12px yellow</p>
</div>

<h2>Spread</h2>
<div class="box" style="text-shadow: 0 0 0 5px magenta">
  <p>text-shadow: 0 0 0 5px magenta</p>
</div>

<h2>Spread and blur</h2>
<div class="box" style="text-shadow: 0 0 10px 5px magenta">
  <p>text-shadow: 0 0 10px 5px magenta</p>
</div>

</body>
</html>
